<template>
	<view class="shade" v-show="showShade" @tap="hidePop">
		<view class="pop" :style="popStyle" :class="{'show':showPop}">
			<view class="con-box" v-for="(item,index) in popButton" :key="index" @tap="pickerMenu(item)" :data-index="index">
				<view class="img">
					<image :src="item.img"></image>
				</view>
				<view class="text">
					<text>{{item.text}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			//遮罩
			showShade: {
				type: Boolean,
				default: true
			},
			//tool框
			showPop: {
				type: Boolean,
				default: true
			},
			popStyle: {
				type: String,
				default: ''
			},
			popButton: {
				type: Array,
				default: () => ["标为关注", "置顶聊天", "删除该聊天"],
			},

		},
		data() {
			return {

			}
		},
		methods: {
			//关闭弹框
			hidePop() {
				this.$emit('hidePop')
			},
			//选择
			pickerMenu(item) {
				this.$emit('pickerMenu', item)

				/* 
				 因为隐藏弹窗方法中会将当前选择的用户下标还原为-1,
				 如果行的菜单方法存在异步情况，请在隐藏之前将该值保存，或通过参数传入异步函数中
				 */
				this.hidePop();
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 遮罩 */
	.shade {
		// background-color: red;
		position: fixed;
		z-index: 100;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		-webkit-touch-callout: none;
		// background-color: red;

		.pop {
			// left: 60%;
			position: fixed;
			z-index: 101;
			width: 200upx;
			box-sizing: border-box;
			font-size: 28upx;
			text-align: left;
			color: #fff;
			background-color: rgba(0, 0, 0, 0.7);
			box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
			line-height: 80upx;
			transition: transform 0.15s ease-in-out 0s;
			user-select: none;
			-webkit-touch-callout: none;
			transform: scale(0, 0);


			.con-box {
				display: flex;

				.img {
					image {
						margin-top: 20rpx;
						width: 40upx;
						height: 40upx;
						border-radius: 10rpx;
						margin-right: 10rpx;
					}
				}
			}


			&.show {
				transform: scale(1, 1);
			}

			&>view {
				padding: 0 20upx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				user-select: none;
				-webkit-touch-callout: none;

				&:active {
					background-color: rgba(0, 0, 0, 0.5);
				}
			}
		}
	}
</style>